<!--大小发起汇兑页面-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="业务类型" label-width="80px" prop="businessType">
            <el-select v-model="form.type" placeholder="请选择业务类型" @change="chooseType(form.type)">
              <el-option label="跨境支付" value="0"></el-option>
              <el-option label="退汇" value="1"></el-option>
              <el-option label="再贴现" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="交易流水号" label-width="80px" prop="bepsId">
            <el-input placeholder="请输入交易流水号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="收款人账号" label-width="80px" prop="colleNo">
            <el-input placeholder="请输入收款人账号" v-model="form.colleNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="收款人名称" label-width="80px" prop="colleName">
            <el-input placeholder="请输入收款人名称" v-model="form.colleName" />
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="工作日期" label-width="80px" prop="workDate">
            <el-date-picker
              v-model="form.workDate"
              type="daterange"
              style="width: 100%"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="请输入工作开始日期"
              end-placeholder="请输入工作结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="交易类别" label-width="80px" prop="businessType">
            <el-select v-model="form.transType" placeholder="请选择交易类别">
              <el-option label="退汇" value="4"></el-option>
              <el-option label="商业汇票" value="5"></el-option>
              <el-option label="跨境业务" value="6"></el-option>
              <el-option label="金融机构" value="7"></el-option>
              <el-option label="异常" value="8"></el-option>
              <el-option label="HotScan检查异常" value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="金额区间" label-width="80px" style="height: 10px">
            <el-row>
              <el-col :span="10">
                <el-form-item prop="miniMoney">
                  <el-input placeholder="最小金额" v-model="form.miniMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin-left: 5px">-</el-col>
              <el-col :span="10">
                <el-form-item prop="maxMoney">
                  <el-input placeholder="最大金额" v-model="form.maxMoney" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3" :offset="22" class="menu-tree">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="400px">
        <el-table-column prop="workDate" label="工作日期" sortable width="150"></el-table-column>
        <el-table-column prop="messageType" label="报文类型" sortable width="250"></el-table-column>
        <el-table-column prop="businessType" label="业务类型" sortable width="250"></el-table-column>
        <el-table-column prop="businessKind" label="业务种类" sortable width="250"></el-table-column>
        <el-table-column prop="businessStatus" label="业务状态" sortable width="150"></el-table-column>
        <el-table-column prop="source" label="来源" sortable width="150"></el-table-column>
        <el-table-column prop="entryOperator" label="录入操作员" sortable width="150"></el-table-column>
        <el-table-column prop="entryTime" label="录入时间" sortable width="250"></el-table-column>
        <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailRow(scope.$index, tableData)" type="text" size="small">
              明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>

        <check-detail-dialog ref="checkDetailDialog" @choose="detailShow"></check-detail-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import checkDetailDialog from "./components/checkDetail";
export default {
  name: "HvpscheckExch",
  components: {
    checkDetailDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      dialogVisible: false,
      form: {
        businesstype: "", // 业务类型
        bepsId: "", // 交易流水号
        colleNo: "", // 收款人账号
        colleName: "", // 收款人名称
        workDate: "", // 工作日期
        transType: "", // 交易类别
        miniMoney: "", // 最小金额
        maxMoney: "", // 最大金额
      },

      tableData: [
        {
          workDate: "2023-10-09", // 工作日期
          messageType: "金融机构发起普通贷记业务报文", // 报文类型
          businessType: "A104-国库资金贷记划拨", // 业务类型
          businessKind: "02201-中央级预算收入", // 业务种类
          businessStatus: "已录入", // 业务状态
          source: "CPG柜面", // 来源
          entryOperator: "cpg002", // 录入操作员
          entryTime: "20230608150131", // 录入时间
        },
        {
          workDate: "2023-10-09", // 工作日期
          messageType: "金融机构发起普通贷记业务报文", // 报文类型
          businessType: "退汇", // 业务类型
          businessKind: "退汇", // 业务种类
          businessStatus: "已录入", // 业务状态
          source: "CPG柜面", // 来源
          entryOperator: "cpg002", // 录入操作员
          entryTime: "20230608150131", // 录入时间
        },
      ],
    };
  },

  mounted() {},

  methods: {
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("form");
    },

    //类型下拉框
    chooseType(row) {
      console.log(row, "chooseType");
      if (row == "2") {
        this.form.workDate = ["20231109", "20231110"];
      } else {
        this.form.workDate = ["20231110", "20231110"];
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClose(done) {
      this.dialogVisible = false;
    },

    // 详情
    detailRow(index, row) {
      console.log(row[index].businessType, "txt---------");
      console.log("this.$refs.checkDetailDialog", this.$refs.checkDetailDialog);
      this.$refs.checkDetailDialog.show(row[index].businessType);
    },

    detailShow(flag) {
      console.log(flag, "flag----------------");
    },
  },
};
</script>
<style lang="scss">
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  //width: 100%;
  height: 5%;
  margin-top: -20px;
  // margin-left: 91%;
  font-size: 28px;
}

.block {
  float: right;
}

.table-header-cell {
  background-color: #e7e7e7 !important;
  font-size: 12px !important;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #e7e7e7;
  font-size: 12px;
  height: 40px;
}

.el-table .el-table__header-wrapper,
.el-table .el-table__fixed-header-wrapper {
  height: 40px;
}

.form-card {
  margin-bottom: 10px;
}
</style>
